{% extends "news/base.html" %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block titleblock %}
    文章详情页
    {% endblock %}</title>
    {% block scriptblock %}
        <script type="text/javascript" src="../../static/news/js/detail.js"></script>
        <script type="text/javascript" src="../../static/news/js/index.js"></script>
    {% endblock %}
</head>
<body>
        {% block con_fl %}
{#            新闻详情#}
        <div class="detail_con fl">
            <h3>{{ data.news.title }}</h3>
            <div class="detail_about clearfix">
                <span class="time_souce fl">{{ data.news.create_time }} 来源: {{ data.news.source }}</span>
{#                新闻点击次数#}
                <span class="comment fr">{{ data.news.clicks }}</span>
            </div>
{#        新闻主题内容,safe禁止转义#}
            {{ data.news.content | safe }}


{#新闻是否收藏#}
        <a href="javascript:;" class="collected block-center" data-newsid="{{ data.news.id }}" style="display: {% if data.is_collected %} block {% else %} none {% endif %}"><span class="out">已收藏</span><span class="over">取消收藏</span></a>
        <a href="javascript:;" class="collection block-center" data-newsid="{{ data.news.id }}" style="display: {% if data.is_collected %} none {% else %} block {% endif %}">收藏</a>


{#判断用户是否登录,如果登录,显示评论form ,否则显示else内容登录发表你的评论#}
        {% if data.user_info %}
            <form action="" class="comment_form" data-newsid="{{ data.news.id }}">
            <div class="person_pic">
                <img src="{% if data.user_info.avatar_url %}
                    {{ data.user_info.avatar_url }}
                {% else %}
                    ../../static/news/images/person01.png
                {% endif %}" alt="用户图标">
            </div>
            <textarea placeholder="请发表您的评论" class="comment_input"></textarea>
            <input type="submit" name="" value="评 论" class="comment_sub">
            </form>
        {% else %}
            <div class="comment_form_logout">
            登录发表你的评论
            </div>
        {% endif %}
{#显示多少条评论#}
        <div class="comment_count">
            {{ data.news.comments_count }}条评论
        </div>


{#评论列表#}
        <div class="comment_list_con">
{#        遍历所有评论,按时间逆序#}
            {% for comment in data.comments %}
{#                主评论#}
                <div class="comment_list">
{#                主头像#}
                <div class="person_pic fl"><img src="{% if comment.user.avatar_url %}{{ comment.user.avatar_url }}{% else %}../../static/news/images/person01.png{% endif %}" alt="用户图标">
                </div>
{#                主昵称#}
                <div class="user_name fl">{{ comment.user.nick_name }}</div>
{#                主评论内容#}
                <div class="comment_text fl">{{ comment.content }}</div>
{#                判断是否有父评论#}
                {% if comment.parent %}
                    <div class="reply_text_con fl">
                    <div class="user_name2">{{ comment.parent.user.nick_name }}</div>
                    <div class="reply_text">{{ comment.parent.content }}</div>
                    </div>
                {% endif %}
{#                评论的点赞和回复#}
                <div class="comment_time fl">{{ comment.create_time }}</div>
                <a href="javascript:;" class="comment_up {% if comment.is_like %} has_comment_up {% endif %} fr" data-commentid="{{ comment.id }}" data-newsid="{{ comment.news_id }}" data-likecount="{{ comment.like_count }}">{% if comment.like_count > 0 %}{{ comment.like_count }}{% endif %}赞</a>
{#                回复评论,需要判断用户是否登录#}
                <a href="javascript:;" class="comment_reply fr " data-userid="{{ data.user_info.id }}">回复</a>
                <form class="reply_form fl" data-commentid="{{ comment.id }}" data-newsid="{{ data.news.id }}">
                <textarea class="reply_input"></textarea>
                <input type="button" value="回复" class="reply_sub fr">
                <input type="reset" name="" value="取消" class="reply_cancel fr">
                </form>
                </div>
            {% endfor %}
        </div>

        </div>
        {% endblock %}

{#用户信息#}
        {% block author_card %}
            {% if data.news.author %}
        <div class="author_card">
            <a href="/user/other_info?this_id={{ data.news.author.id }}" class="author_pic"><img src="{% if data.news.author.avatar_url %}
            {{ data.news.author.avatar_url }}
            {% else %}
            ../../static/news/images/user_pic.png
            {% endif %}" alt="author_pic"></a>
            <a href="/user/other_info?this_id={{ data.news.author.id }}" class="author_name">{{ data.news.author.nick_name }}</a>
            <div class="author_resume">签名：{{ data.news.author.signature }}</div>
            <div class="writings"><span>总篇数</span><b>{{ data.news.author.news_count }}</b></div>
            <div class="follows"><span>粉丝</span><b>{{ data.news.author.followers_count }}</b></div>
            <a href="javascript:;" class="focus fr" data-userid="{{ data.news.author.id }}" style="display: {% if data.is_followed %}none{% else %}block{% endif %}">关注</a>
            <a href="javascript:;" class="focused fr" data-userid="{{ data.news.author.id }}" style="display: {% if data.is_followed %}block{% else %}none{% endif %}"><span class="out">已关注</span><span class="over">取消关注</span></a>
        </div>
    {% endif %}
{#        <div class="author_card">#}
{#            <a href="#" class="author_pic"><img src="../../static/news/images/user_pic.png" alt="author_pic"></a>#}
{#            <a href="#" class="author_name">张大山</a>#}
{#            <div class="author_resume">张大山的简介,张大山</div>#}
{#            <div class="writings"><span>总篇数</span><b>23</b></div>#}
{#            <div class="follows"><span>粉丝</span><b>36</b></div>#}
{#            <a href="javascript:;" class="focus fr">关注</a>#}
{#            <a href="javascript:;" class="focused fr"><span class="out">已关注</span><span class="over">取消关注</span></a>#}
{#        </div>#}
        {% endblock author_card %}


</body>
</html>